<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="tblDatabaseName"
        placeholder="请输入库名"
        style="width: 200px; margin-right: 20px"
      />
      <el-input
        v-model="tblName"
        placeholder="请输入表名"
        style="width: 200px; margin-right: 20px"
      />
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
      <el-button
        style="margin-left: 10px"
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="reset"
        >重置</el-button
      >
    </div>
    <el-table
      :data="backupList"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="libName" label="库名" />
      <el-table-column prop="tblName" label="表名" />
      <el-table-column prop="time" label="备份时间" />
      <el-table-column prop="status" label="当前状态" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tblDatabaseName: "",
      tblName: "",
      backupList: [
        {
          libName: "lib_A",
          tblName: "tbl_A",
          time: "2023-8-10 14:11:10",
          status: "待备份",
        },
        {
          libName: "lib_B",
          tblName: "tbl_B",
          time: "2023-8-11 12:17:14",
          status: "已备份",
        },
      ],
    };
  },
  methods: {
    search() {
      console.log("search");
      //   this.getBasicData();
    },
    reset() {
      this.tblName = "";
      this.tblDatabaseName = "";
      //   this.getBasicData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
</style>